<template>
  <div>
    <el-form class="editInfo" ref="editInfo" :inline="false" :model="editInfo.data" :rules="editInfo.rules"
             size="small"
             label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="合同开始日期" prop="contractBeginDate">
            <el-date-picker
              v-model="editInfo.data.contractBeginDate"
              type="date"
              placeholder="合同开始日期"
              value-format="yyyy-MM-dd"
              style="width: 100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同结束日期" prop="contractEndDate">
            <el-date-picker
              v-model="editInfo.data.contractEndDate"
              type="date"
              placeholder="合同结束日期"
              value-format="yyyy-MM-dd"
              style="width: 100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同签订日期" prop="contractSignDate">
            <el-date-picker
              v-model="editInfo.data.contractSignDate"
              type="date"
              placeholder="合同签订日期"
              value-format="yyyy-MM-dd"
              style="width: 100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同年限" prop="contractYear">
            <!--<el-input v-model.number="editInfo.data.contractYear" placeholder="请输入合同年限"></el-input>-->
            <el-select v-model="editInfo.data.contractYear" placeholder="请选择">
              <el-option
                v-for="item in contractYearsListData"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  // import { debounce } from 'lodash'
  import commonMixins from '@/mixins/common'

  export default {
    name: 'RecordEditContract',
    mixins: [commonMixins],
    components: {},
    data() {
      return {
        dialog: {
          visible: false // 是否显示
        },
        formParams: { // 编辑需要的参数
          contractBeginDate: '', // 劳动合同开始日
          contractEndDate: '', // 劳动合同结束日
          contractSignDate: '', // 合同签订日期
          contractYear: '' // 合同年限
        },
        editInfo: { // 编辑表单
          id: undefined,
          data: {
            ...this.formParams
          },
          rules: {
            contractBeginDate: [
              { required: true, message: '请选择合同开始日期', trigger: 'change' }
            ],
            contractEndDate: [
              { required: true, message: '请选择合同结束日期', trigger: 'change' }
            ],
            contractSignDate: [
              { required: true, message: '请选择合同签订日期', trigger: 'change' }
            ],
            contractYear: [
              { required: true, message: '请选择合同年限', trigger: 'change' }
            ]
          },
          disabled: false // 处理编辑，某些项禁止编辑
        },
        contractYearsListData: [
          {
            value: '',
            label: '请选择'
          },
          {
            value: '1',
            label: '1年'
          }, {
            value: '2',
            label: '2年'
          }, {
            value: '3',
            label: '3年'
          }, {
            value: '4',
            label: '4年'
          }, {
            value: '5',
            label: '5年'
          }
        ],
        detailInfo: null
      }
    },
    props: {
      visible: {
        type: [Boolean],
        required: true,
        default: false
      },
      detailData: {
        type: Object,
        default() {
          return null
        }
      }
    },
    computed: {},
    methods: {
      async resetEditData(data = null) { // 重置编辑表单
        this.editInfo.id = undefined
        this.editInfo.disabled = false
        this.editInfo.data = JSON.parse(JSON.stringify(this.formParams))
        if (data) { // 编辑
          // this.editInfo.id = data.uuid
          this.editInfo.id = data.id
          Object.keys(this.formParams).forEach((item) => {
            this.editInfo.data[item] = data[item]
          })
          this.editInfo.disabled = true
        }
      },
      async initData(data = null) { // 初始化数据
        await this.resetEditData(data)
        this.$nextTick(() => {
          this.$refs['editInfo'].clearValidate()
        })
      }
    },
    watch: {
      visible: {
        handler: function(newVal, oldVal) {
          if (newVal !== this.dialog.visible) {
            this.dialog.visible = newVal
            if (newVal) {
              this.initData(this.detailData)
            }
          }
        },
        immediate: true
      },
      detailData: {
        handler: function(newVal, oldVal) {
          this.initData(newVal)
        },
        deep: true,
        immediate: true
      },
      'editInfo.data': {
        handler: function(newVal, oldVal) {
          // console.log(newVal)
          this.$emit('on-input', newVal)
        },
        deep: true,
        immediate: true
      }
    },
    created() {
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>
  .edit-box {
    & /deep/ .el-dialog {
      min-width: 900px;
      max-width: 1200px;
    }

    & /deep/ .el-dialog__body {
      padding: 10px 20px 30px;
    }

    & /deep/ .el-tabs {
      .el-tabs__content {
        overflow: visible;
      }
    }
  }

  .editInfo {
    margin-right: 0;

    .el-cascader,
    .el-select {
      width: 100%;
    }
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 70px;
    height: 70px;
  }

  .el-upload--picture-card {
    width: 70px;
    height: 70px;
    line-height: 68px;
    display: none;
  }

  .el-upload-list--picture-card .el-upload-list__item-actions span + span {
    margin-left: 8px;
  }

</style>
